<template>
  <div class="welfare-container">
    <xl-search-form :formItems="formItems" @search="search"></xl-search-form>
    <xl-table :columns="columns" :action="loadData" ref="xlTableRef">
      <template slot="top">
        <el-button type="primary" size="small" style="margin-bottom: 10px" @click="dialogVisible = true">新增福利</el-button>
      </template>
      <template slot="enableStatus" slot-scope="{ row }">
        <el-tag type="success" v-if="row.enableStatus">启用</el-tag>
        <el-tag type="danger" v-else>禁用</el-tag>
      </template>
      <template slot="action" slot-scope="{ row }">
        <el-button type="text" @click="handleEditWelfare(row)">编辑</el-button>
      </template>
    </xl-table>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="resetForm('welfareFormRef')">
      <el-form :model="welfareForm" :rules="rules" ref="welfareFormRef" label-width="100px" size="small">
        <el-form-item label="福利名称" prop="name">
          <el-input v-model="welfareForm.name"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="order">
          <el-input-number v-model="welfareForm.order" :min="1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="状态" prop="enableStatus">
          <el-radio-group v-model="welfareForm.enableStatus">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit('welfareFormRef')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { columns, formItems } from './const'
import { getWelfareList, createWelfare, updateWelfare } from '@/api/welfare'

export default {
  name: 'WelfareIndex',
  data() {
    return {
      columns,
      formItems,
      dialogVisible: false,
      dialogTitle: '新增福利',
      welfareId: null,
      welfareForm: {
        name: '',
        order: 1,
        enableStatus: 1
      },
      rules: {
        name: { required: true, trigger: 'blur', message: '请输入福利名称' }
      }
    }
  },
  methods: {
    // 新增福利
    handleSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res
          let message
          if (this.welfareId !== null) {
            res = await updateWelfare(this.welfareForm)
            message = '更新成功'
          } else {
            res = await createWelfare(this.welfareForm)
            message = '添加成功'
          }

          if (res.code === 200) {
            this.$message.success(message)
            this.dialogVisible = false
            this.$refs['xlTableRef'].loadData()
          }
        }
      })
    },
    // 编辑福利
    handleEditWelfare(row) {
      this.welfareForm = { ...row }
      this.welfareId = row.id
      this.dialogTitle = '编辑福利信息'
      this.dialogVisible = true
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.dialogVisible = false
      this.dialogTitle = '新增福利'
      this.welfareId = null
      this.welfareForm = {
        name: '',
        order: 1,
        enableStatus: 1
      }
    },
    search(params) {
      this.$refs['xlTableRef'].loadData(params)
    },
    loadData(params) {
      return getWelfareList(params)
    }
  }
}
</script>

<style lang="scss" scoped></style>
